<template>
  <div>
    <div class="header">
      <img src="@/assets/images/return.png" class="header_img" @click="back"/>
      <div class="title">工作说明</div>
      <div class="save" @click="saveBack">保存</div>
    </div>
    <div class="inputGroup">
      <div class="inputTitle">人均单价</div>
      <input type="number" class="number" placeholder="请输入单价金额/8小时" v-model="data.price"/>
    </div>
    <div class="time_box">
      <div class="week">工作日</div>
    </div>
    <div class="inputGroup" @click="open('timePicker',1)">
      <div class="inputTitle">开始时间</div>
      <div type="number" class="date">{{data.normalStartTime?data.normalStartTime:''}}</div>
    </div>
    <div class="inputGroup" @click="open('timePicker',2)">
      <div class="inputTitle">结束时间</div>
      <div type="number" class="date">{{data.normalEndTime?data.normalEndTime:''}}</div>
    </div>
    <div class="time_box">
      <div class="day">周末</div>
    </div>
    <div class="inputGroup" @click="open('timePicker',3)">
      <div class="inputTitle">开始时间</div>
      <div type="number" class="date">{{data.weekStartTime? data.weekStartTime:''}}</div>
    </div>
    <div class="inputGroup" @click="open('timePicker',4)">
      <div class="inputTitle">结束时间</div>
      <div type="number" class="date">{{data.weekEndTime ? data.weekEndTime:''}}</div>
    </div>
    <div class="inputGroup lastGroup">
      <div class="inputTitle">可工作地点</div>
      <input type="text" class="number" placeholder="请输入工作地点" v-model="data.workAddress"/>
    </div>
    <mt-datetime-picker
      ref="timePicker"
      type="time"
      @confirm="handleChange">
    </mt-datetime-picker>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'
  export default {
    name: "WorkExplain",
    data(){
      return{
        pickerType:null,
        data:{
          price: null, // 人均单价
          normalStartTime: null, // 可工作时间
          normalEndTime:null,// 可工作时间
          weekStartTime: null,// 可工作时间
          weekEndTime: null,// 可工作时间
          workAddress:null, // 可工作地点
          workTime:null,// 可工作时间
        }
      }
    },
    methods:{
      back(){
        this.$router.back()
      },
      open(picker,type) {

        this.pickerType = type;
        this.$refs[picker].open();
      },
      handleChange(value) {
        switch (this.pickerType) {
          case 1:
            this.data.normalStartTime = value
            break
          case 2:
            this.data.normalEndTime = value
            break
          case 3:
            this.data.weekStartTime = value
            break
          case 4:
            this.data.weekEndTime = value
            break
        }
      },
      saveBack(){
        if(!this.data.normalEndTime || !this.data.normalStartTime || !this.data.weekStartTime || !this.data.weekEndTime){
          Toast({
            message: '工作时间不能为空',
            position: 'middle',
            duration: 1000
          });
        }else{
          this.data.workTime = `工作日${this.data.normalStartTime}-${this.data.normalEndTime}、周末${this.data.weekStartTime}-${this.data.weekEndTime}`
          this.$store.dispatch('action_updateWorkExplain',this.data).then()
          this.$router.back()
        }
      }
    }
  }
</script>

<style scoped>
  .header{
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }
  .header_img{
    width: 17px;
    height: 30px;
  }
  .title{
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }
  .save{
    font-size: 28px;
    color: #ffffff;
  }
  .inputGroup{
    font-size:28px;
    padding: 0px 30px;
    height:98px;
    background:rgba(255,255,255,1);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #efefef;
  }
  .time_box{
    height: 98px;
    display: flex;
    align-items: center;
    padding-left: 30px;
  }
  .week,.day{
    font-size: 28px;
    font-weight:500;
    color:rgba(43,43,43,1);
    text-align: center;
  }
  .inputTitle{
    font-weight:400;
    color:rgba(43,43,43,1);
  }
  .number::placeholder{
    font-size:28px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
  }
  .number{
    flex: 1;
    text-align: right;
    font-size:28px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
  }
  .date{
    flex: 1;
    text-align: right;
    font-size:28px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
  }
  .lastGroup{
    margin-top: 25px;
  }
</style>
